<template>
	<view class="center">
		<view class="center_top" :style="`background: url(${userInfo.avatar}) no-repeat 0% 50%;`">
			<view class="mask"></view>
		</view>
		<view class="center_box_bg">
			<view class="profily">
				<view class="base">
					<view class="profily_header" :style="`background-image: url(${userInfo.avatar});`">
					</view>		
					<view class="buttons" v-if="!isMe">
						<tui-button  
						v-show="!userInfo.isFollow" 
						margin="0 10rpx 26rpx 0" type="black" shape="circle" width="120rpx" height="35rpx" :size="32" 
						@click="follow()">
							关注
						</tui-button>
						<tui-button
						v-show="userInfo.isFollow" 
						plain margin="0 10rpx 26rpx 0" type="gray" shape="circle" width="120rpx" height="35rpx" :size="32" 
						@click="cancelFollow()">
							已关注
						</tui-button>
						<tui-button  
						v-if="true" 
						margin="0 10rpx 26rpx 0" type="black" shape="circle" width="120rpx" height="35rpx" :size="32" @tap="jump(chatUrl,true)">
						发消息
						</tui-button>
					</view>
				</view>
				<view>
					<text style="font-size:17px;font-weight:bold;">
						{{userInfo.nickname}}
					</text>
					<br/>
					<text class="small-font">
						{{userInfo.signature}}
					</text>
					<br/>
					<view class="small-font">
						<text class="follow-fans-num" style="margin-left:0px;" @tap="jump(followsUrl)">{{userInfo.followNum}}</text>关注
						<text class="follow-fans-num" @tap="jump(fansUrl)">{{userInfo.fansNum}}</text> 粉丝
					</view>
				</view>
			</view>		
		</view>
		<view class="baiban">
		
		</view>
		<scroll-view id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true" :show-scrollbar="false"
		 :scroll-into-view="scrollInto">
			<view v-for="(tab, index) in tabBars" :key="tab.id" class="tui-tab-item" :id="tab.id" :data-current="index" @click="tabClick">
				<text class="tui-tab-item-title" :class="{ 'tui-tab-item-title-active': tabIndex == index }">{{ tab.name }}</text>
				<view class="tui-tab-item-title" :class="{ 'tui-tab-item-title-active': tabIndex == index }">{{ tab.name }}</view>
			</view>
		</scroll-view>
		<topics v-show="tabIndex==0" :userId="userId"></topics>
		<comments v-show="tabIndex==1" :userId="userId"></comments>
	</view>
</template>

<script>
	const chatUrl = "/pages/chat/chat";//私聊页面
	const followsUrl = "/pages/user/follows"; //关注列表页面
	const fansUrl = "/pages/user/fans";//粉丝列表页面
	import topics from '@/pages/user/topics.vue'
	import comments from '@/pages/user/comments.vue'
	import followApi from "@/request/api/followApi.js"
	import userApi from "@/request/api/userApi.js"
	import userUtils from "@/utils/userUtils.js"
	export default {
		data() {
			return {
				tabIndex: 0,
				currentTab:'topic',
				tabBars: [{
						name: '话题',
						id: 'topic'
					},
					{
						name: '评论',
						id: 'comment'
					}
				],
				scrollInto: '',
				userId:'',
				userInfo:{
					nickname:'',  //用户昵称
					signature:'', //个性签名
					avatar:'',
					followNum:0, //关注数
					fansNum:0,       //粉丝数
					isFollow:false
				},
				isMe:false, //是不是当前登录用户的个人页
				chatUrl:chatUrl,
				followsUrl:followsUrl,
				fansUrl:fansUrl
			}
		},
		computed: {
		
		},
		components:{
			topics,
			comments
		},
		onReachBottom: function() {
			 uni.$emit('onReachBottom',this.currentTab); //触底，通知子组件
		},
		onLoad (options) {
			//获取其他页面带来的参数
			this.userId = options.id
		},
		created() {
			this.getUserInfo();
			this.getUserfollowFansNum();
			let loginUser = uni.getStorageSync('user')
			if(loginUser == null || loginUser.id != this.userId){ //判断当前登录用户和个人页的用户是否一致
				this.isFollow();
			}else if(loginUser.id == this.userId){
				this.isMe = true;
			}
		},
		methods: {
			tabClick(event){
				this.currentTab = event.currentTarget.id
				this.tabIndex = event.currentTarget.dataset.current
			},
			//获取用户信息
			getUserInfo(){
				userApi.userBaseInfo(this.userId).then((data)=>{
					if(data.code == 0){
						this.userInfo.nickname = data.user.nickname
						this.userInfo.avatar = data.user.avatar
						this.userInfo.signature = data.user.description
					}
				})
			},
			//获取用户的关注、粉丝数
			getUserfollowFansNum(){
				followApi.followFansNum(this.userId).then((data)=>{
					if(data.code == 0 ){
						this.userInfo.followNum = data.data.followNum
						this.userInfo.fansNum = data.data.fansNum
					}
				})
			},
			//查看当前用户是否关注了个人页的用户
			isFollow(){
				followApi.isFollow(this.userId).then((data)=>{
					if(data.code == 0 ){
						this.userInfo.isFollow = data.status
					}
				})
			},
			//关注个人页中的用户
			follow(){
				userUtils.loginCheck();
				followApi.follow(this.userId).then((data)=>{
					if(data.code == 0 ){
						this.userInfo.isFollow = true;
						this.userInfo.fansNum++;
					}
				})
			},
			//取消关注个人页中的用户
			cancelFollow(){
				followApi.cancelFollow(this.userId).then((data)=>{
					if(data.code == 0 ){
						this.userInfo.isFollow = false;
						this.userInfo.fansNum--;
					}
				})
			},
			jump(url,loginCheck){
				if(loginCheck){
					userUtils.loginCheck().then(()=>{
						uni.navigateTo({
							url:url+"?id="+this.userId
						})
					})
				}else{
					uni.navigateTo({
						url:url+"?id="+this.userId
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.profily,
	.profily_header {
		border-radius: 8px;
	}

	.center {
		//background-color:#EDEDED;
		height: 100%;
		
		&_top {
			height: 18%;
			background-size: cover;

			// background: #E6E6E6;
			.mask {
				background: rgba(0, 0, 0, .4);
				height: 100%;
			}
		}

		&_box_bg {
			background: #F9F9F9;
			position: relative;

			.profily {
				position: absolute;
				width: 90%;
				// border:1px solid #F7F7F7;
				margin: 0 auto;
				top: -100upx;
				left: 5%;
				background: #FEFEFE;
				padding: 35upx;
				box-sizing: border-box;
				box-shadow: 0px 2px 5px #EDEDED;
			}
		}
	}

	.base {
		display: flex;
		align-items: center;
		border-bottom: 2px solid #F6F6F6;
		padding-bottom: 15upx;
		position: relative;
		.profily_header {
			height: 120upx;
			width: 120upx;
			//background-image: url('../../static/fumou-center-template/header.jpg');
			background-size: 100%;
		}
		
		image{
			position: absolute;
			height: 40upx;
			width: 40upx;
			right: 0px;
			top:0px;
		}
	}

	.buttons{
		position: absolute;
		height: 40upx;
		width: 40upx;
		right: 70rpx;
		top:0px;
	}
	.small-font{
		font-size:10px
	}
	
	.follow-fans-num{
		color:#0066FF;
		font-size:14px;
		font-weight:bold;
		display:inline-block;
		margin-left:5px;
	}
	
	.center_menu {
		width: 100%;
		display: inline-block;
	
		.menu_item {
			font-size: 28upx;
			letter-spacing: 1px;
			padding: 14px 5%;
			background: #FEFEFE;
			overflow: hidden;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			position: relative;
			border-bottom: 1px solid #EFEFEF;
	
			&:hover {
				background: #F6F6F6 !important;
			}
	
			&::after {
				content: '';
				width: 30upx;
				height: 30upx;
				position: absolute;
				right: 5%;
				background: url('../../static/fumou-center-template/right.png') no-repeat;
				background-size: 100%;
			}
	
			text:nth-of-type(1) {
				margin-left: 10px;
			}
	
			image {
				width: 40upx;
				height: 40upx;
			}
	
			&:nth-of-type(4) {
				margin-top: 10px;
			}
		}
	}
	
	
	.baiban {
		background: #FEFEFE;
		height: 230upx;
	}
	
	//==============================================================
	 .tui-scroll-h {
		height: 80rpx;
		background-color: #ffffff;
		flex-direction: row;
		white-space: nowrap;
		//position: fixed;
		//left: 0;
		z-index: 999;
	 }
	 
	 .tui-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
	 }
	 .tui-tab-item-title {
		color: #555;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	 }
	 
	 .tui-tab-item-title-active {
		color: #5677fc;
		font-size: 36rpx;
		font-weight: bold;
		border-bottom-width: 6rpx;
		border-color: #5677fc;
		text-align: center;
	 }
	
	
	
</style>
